<%@page import="org.apache.jasper.tagplugins.jstl.core.If"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="sf"%>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<security:csrfMetaTags /> 
<title>Insert title here</title>
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/resources/script/jquery-3.1.1.js"></script>
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/resources/script/layer-v3.0.1/layer/layer.js"></script>
<link type="text/css" rel="stylesheet"
	href="${ pageContext.request.contextPath }/resources/csses/not_leave_.css">
<script type="text/javascript">
	$(document).ready(function() {
		/* $("#new").click(function(){
			layer.open({
				title : '添加新会议室',
				type : 2,
				area : ['460px','365px'],
				content: "${ pageContext.request.contextPath }/${ roler }/newroom",
				cancel: function(index){
					location.reload([true]);
					}
				})
			}); */
		$(".delete").click(function() {
			var id = $(this).parent().parent().attr('id');
			layer.confirm('是否确定要删除？', {
				btn : [ '确定', '取消' ]
			}, function() {
				var url = "${ pageContext.request.contextPath }/${ roler }/deleteuser?uId=" + id;
				window.location.href=url;
				layer.msg('您点了确定');
			}, function() {
				layer.msg('您点了取消');
			})
		});
		$(".enabled").bind("change", function(){
			var id = $(this).parent().parent().attr('id');
			var enabled;
			if ($(this).val() == "true") {
				//layer.msg('点击了确定'+id);
				enabled = true;
			}else {
				//layer.msg('状态改变了');
				enabled = false;
			}
			setUserEnableAjax($(this),id,enabled);
			});
		//权限select标签change时间
		$(".role").bind("change", function(){
			var id = $(this).parent().parent().attr('id');
			var roler = $(this).val();
			setRoler(id, roler);
			});
		//设置ajax提交头添加csrf令牌
		$(function () {
		  var token = $("meta[name='_csrf']").attr("content");
		  var header = $("meta[name='_csrf_header']").attr("content");
		  $(document).ajaxSend(function(e, xhr, options) {
		    xhr.setRequestHeader(header, token);
		  });
		});
	})
	//ajax提交enabled修改
	function setUserEnableAjax(e,id,enabled){
		layer.load(1, {
			shade : false
		});
		$.ajax({
			type : "post",
			url : "${ pageContext.request.contextPath }/${ roler }/setuserenable",
			data : {"id":id,"enabled":enabled},
			dataType: "json",
			async : true,
			error : function(data){
				layer.closeAll('loading');//关闭加载层
				alert("出错了");
				},
			success : function(data){
				layer.closeAll('loading');//关闭加载层
				if (enabled==false) {
					e.css("color","red");
				}else{
					e.css("color","black");
					};
				},
			});
		}
	//异步提交权限修改
	function setRoler(id,roler){
		layer.load(1, {
			shade : false
		});
		$.ajax({
			type : "post",
			url : "${ pageContext.request.contextPath}/${ roler }/setuserrole",
			data : {"id":id,"roler":roler},
			dataType: "json",
			async : true,
			error : function(data){
				layer.closeAll('loading');//关闭加载层
				alert("出错了！");
				},
			success : function(data){
				layer.closeAll('loading');//关闭加载层
				},
			});
		}
</script>
<style type="text/css">
select {
	width: 45px;
	height: 25px;
	padding: 4px;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	border: solid 1px gray;
	/*在选择框的最右侧中间显示小箭头图片*/
	background: url("${ pageContext.request.contextPath }/resources/images/arrow.png")
		no-repeat scroll right center transparent;
	/*为下拉小箭头留出一点位置，避免被文字覆盖*/
	padding-right: 14px;
}
</style>
</head>
<body>
	<div id="containertitle">
		所有用户
		<div style="float: right;">
			<!-- <a id="new" style="text-align: right;" href="#">新增会议室</a> -->
		</div>
	</div>
	<div style="display: block;">
		<table class="manager">
			<thead class="managerthead">
				<tr>
					<td width="20px"></td>
					<th>用户名</th>
					<th>电话</th>
					<th>内网邮箱</th>
					<th>真名</th>
					<th>科室</th>
					<th>权限</th>
					<th>注册时间</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${ users }" var="user" varStatus="statu">
					<tr id="${ user.id }">
						<td class="cell">${ statu.index + 1 }</td>
						<td class="cell">${ user.name }</td>
						<td class="cell">${ user.phoneNumber}</td>
						<td class="cell">${ user.inEmail}</td>
						<td class="cell">${ user.realName}</td>
						<td class="cell">${ user.branch.name}</td>
						<%-- <td class="cell">${ user.roles}</td> --%>
						<td class="cell"><select id="select" class="role">
								<option value="ROLE_USER"
									<c:if test="${ user.roles == 'ROLE_USER' }">  selected="selected" </c:if>>USER</option>
								<option value="ROLE_ADMIN"
									<c:if test="${ user.roles == 'ROLE_ADMIN' }">  selected="selected" </c:if>>ADMIN</option>
						</select></td>
						<td class="cell"><fmt:formatDate
								value="${ user.createdDate }" pattern="yyyy-M-d H:mm:ss" /></td>
						<%-- <td class="cell" align="center" style="width: 30px;"><img
						class="edit" alt="Edit"
						src="${ pageContext.request.contextPath }/resources/images/edit.png"
						width="20px;" height="20px;"></td> --%>
						<td class="cell" style="width: 30px;"><select id="select"
							class="enabled"
							<c:if test="${ user.enabled == false }">  style="color : red;" </c:if>>
								<option class="true" value="true"
									<c:if test="${ user.enabled }">  selected="selected" </c:if>>启用</option>
								<option class="false" value="false"
									<c:if test="${ user.enabled == false }">  selected="selected" </c:if>>停用</option>
						</select></td>
					</tr>
				</c:forEach>
				<tr>
					<td style="text-align: center; font-size: 15px;" colspan="9"><a
						style="text-decoration: none; font-size: 12px;"
						href="${ pageContext.request.contextPath }/${ roler }/user?current=${ currentPage > 1 ? currentPage - 1 : 1}"><<上一页&nbsp;&nbsp;</a>
						<c:choose>
							<c:when test="${ pagecount <= 5 }">
								<c:forEach begin="1" end="${ pagecount }" var="index" step="1">
									<c:choose>
										<c:when test="${ index == currentPage }">
											<a style="color: red;"><c:out value="${ index }" /> </a>
										</c:when>
										<c:otherwise>
											<a style="text-decoration: none;"
												href="${ pageContext.request.contextPath }/${ roler }/user?current=${ index}"><c:out
													value="${ index }" /> </a>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</c:when>
							<c:when test="${ currentPage > pagecount - 2 }">
								<c:forEach begin="${ pagecount - 4 }" end="${ pagecount }"
									step="1" var="index">
									<c:choose>
										<c:when test="${ index == currentPage }">
											<a style="color: red;"><c:out value="${ index }" /> </a>
										</c:when>
										<c:otherwise>
											<a style="text-decoration: none;"
												href="${ pageContext.request.contextPath }/${ roler }/user?current=${ index}"><c:out
													value="${ index }" /> </a>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</c:when>
							<c:otherwise>
								<c:choose>
									<c:when test="${ currentPage > 3 }">
										<c:forEach begin="${ currentPage - 2 }"
											end="${ currentPage + 2 > pagecount ? pagecount : currentPage + 2}"
											step="1" var="index">
											<c:choose>
												<c:when test="${ index == currentPage }">
													<a style="color: red;"><c:out value="${ index }" /> </a>
												</c:when>
												<c:otherwise>
													<a style="text-decoration: none;"
														href="${ pageContext.request.contextPath }/${ roler }/user?current=${ index}"><c:out
															value="${ index }" /> </a>
												</c:otherwise>
											</c:choose>
										</c:forEach>
									</c:when>
									<c:otherwise>
										<c:forEach begin="1" end="${ pagecount < 5 ? pagecount : 5 }"
											var="index" step="1">
											<c:choose>
												<c:when test="${ index == currentPage }">
													<a style="color: red;"><c:out value="${ index }" /> </a>
												</c:when>
												<c:otherwise>
													<a style="text-decoration: none;"
														href="${ pageContext.request.contextPath }/${ roler }/user?current=${ index}"><c:out
															value="${ index }" /> </a>
												</c:otherwise>
											</c:choose>
										</c:forEach>
									</c:otherwise>
								</c:choose>
							</c:otherwise>
						</c:choose> <a style="text-decoration: none; font-size: 12px;"
						href="${ pageContext.request.contextPath }/${ roler }/user?current=${ currentPage < pagecount ? currentPage + 1 : pagecount}">&nbsp;&nbsp;下一页>></a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>